<template>
  <div>
    <PagingTable ref="pagingTable" :options="options" :querys="querys" >
      <template slot="filter-content">
        <el-row >
          <el-col :span="24" class="left-col">
            <span style="line-height:40px;margin-right:5px; font-size: 18px">筛选：</span>
            <el-select v-model="querys.type" class="filter-item" clearable placeholder="题目类型">
              <el-option
                v-for="item in quTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
            <el-select v-model="querys.subject" class="filter-item" placeholder="科目">
              <el-option 
                v-for="subject in subjects"
                :key = "subject.id"
                :label = "subject.name"
                :value = "subject.id" />
            </el-select>

            <el-input  v-model="querys.content" placeholder="题目内容" style="width: 200px;" class="filter-item" />
          </el-col>

        </el-row>
      </template>

      <template slot="data-columns">
        <el-table-column label="题目类型" align="center" width="100px" >
          <template slot-scope="scope">
            {{ quFilters[scope.row.type] }}
          </template>
        </el-table-column>

        <el-table-column label="题目内容" show-overflow-tooltip >
          <template slot-scope="scope">
            <router-link :to="{ name: 'QuForm', params:{ id: scope.row.id}}">
              {{ scope.row.content }}
            </router-link>
          </template>
        </el-table-column>
      </template>
    </PagingTable>
  </div>
</template>

<script>
import PagingTable from '@/components/PagingTable'
import request from '@/request'

export default {
  name: 'QuList',
  components: { PagingTable },
  data() {
    return {
      querys: { },

      quTypes: [
        { value: 0, label: '选择题' },
        { value: 1, label: '多选题' },
        { value: 2, label: '填空题' },
        { value: 3, label: '判断题' }
      ],
      quFilters: { 0: '选择题', 1: '多选题', 2: '填空题', 3: '判断题', },
      subjects: [],

      options: {
        controllerUrl: '/question', // 列表请求URL
        addRoute: 'QuNew' // 添加数据路由
      }
    }
  },
  mounted() {
    request({ method: 'post', url: '/subject/query', 
      data: { current: 1, size: 100, params: null }
    })
    .then(resp=>{ this.subjects = resp.data.data.records })
  },
  methods: {

  } 
}
</script>
<style>
.left-col{
  height: 40px;
  display: flex;
  justify-content: left;
}
</style>